aboutsummaryrefslogtreecommitdiffstats
path: root/src/routes/(app)/reset/[code]/+page.svelte
blob: d93e8bdf8fbbd012aa8239286fb903396aaf03be (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<script>
  import { t } from "$lib/translations";
  import Icon from "$comp/Icon.svelte";
  import Spinner from "$comp/Spinner.svelte";
  import { fly } from "svelte/transition";
  import { password } from "$lib/store";

  export let form;
  let email;
  let loading;
  let revealPassword;
</script>

<div class="pt-10">
  <div class="w-[243px] mx-auto mb-10">
    <a href="/">
      <Icon icon="logo" />
    </a>
  </div>

  <div class="flex justify-center items-center">
    <div
      class="shadow-xl rounded-3xl p-10 pb-12 space-y-5 w-full mx-5 md:mx-0 md:w-[400px]"
    >
      <h1 class="text-2xl font-bold text-center">{$t("login.reset")}</h1>

      {#if form?.error}
        <div class="text-red-600 text-center" in:fly>
          {form.error}
        </div>
      {/if}

      <form class="space-y-5" method="POST">
        <div class="relative">
          <label for="password" class="block font-semibold"
            >{$t("login.newPassword")}</label
          >
          {#if revealPassword}
            <input
              name="password"
              type="text"
              required
              class="bg-primary"
              bind:value={$password}
              autocapitalize="none"
            />
          {:else}
            <input
              name="password"
              type="password"
              required
              class="bg-primary"
              bind:value={$password}
              autocapitalize="none"
            />
          {/if}
          <button
            type="button"
            on:click={() => (revealPassword = !revealPassword)}
            class="absolute right-5 top-10"
          >
            <Icon icon={revealPassword ? "eye" : "eye-off"} />
          </button>
        </div>

        <div class="text-secondary">
          A new seed phrase will be generated for your account. You'll need to
          import your old seed phrase if you want to use the same nostr profile
          and savings account as before.
        </div>

        <button
          type="submit"
          class="bg-black text-white w-full rounded-2xl p-4 font-semibold hover:opacity-80"
          disabled={loading}
        >
          {#if loading}
            <Spinner />
          {:else}
            {$t("login.submit")}
          {/if}
        </button>
      </form>
    </div>
  </div>
</div>